<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品销售</span>
      </div>
      <div class="chart-container">
        <ShowGoodsSalesVolume/>
        <ShowGoodsSales/>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>胡不诗排行榜</span>
      </div>
      <div class="chart-container">
        <ShowBestBusinessman/>
      </div>
    </el-card>
    <!-- <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>胡不思排行榜</span>
      </div>
      <div class="chart-container">
        <showInfoBusinessman/>
      </div>
    </el-card> -->
  </div>
</template>

<script>
import * as echarts from 'echarts';
import showGoodsSalesVolume from "@/components/Echarts/showGoodsSalesVolume.vue";

export default {
  name: 'EChartComponent',
  data() {
    return {
      // 图表实例
      echartInstance: null,
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.echartInstance = echarts.init(this.$refs.echartRef);
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    this.echartInstance.setOption(option);
  },
  beforeDestroy() {
    // 组件销毁前，销毁ECharts实例
    if (this.echartInstance) {
      this.echartInstance.dispose();
    }
  }
};
</script>

<style>
/* 在这里添加样式 */
.chart-container {
  display: flex;
  justify-content: center;
}
</style>
